iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 16
1
Modern Web

從平面轉型成網頁設計的 UI/UX 設計師系列 第 16

【Day 16】簡單好上手的圖片輪播 jQuery - Owl Carousel

  • 分享至 

  • xImage
  •  

Owl Carousel(官網連結

Owl-Carousel-2
by Vue component for Owl Carousel 2 on Vue.js Examples

Owl Carousel 可說是使用率最高的圖片輪播外掛,筆者逛到很多網站、模版範本、甚至是老闆付費買下來的前端框架,多數都內建這個輪播效果。

長期使用下來覺得功能十分強大,可自適應螢幕尺寸(RWD)參數設定靈活(連想設定顯示 1.5 張圖都可以XD),手機版也支援觸控效果,可自由調整是否顯示箭頭頁面切換的點點

安裝

  1. cdnjs,複製最新版本的連結後貼到 HTML 的 head 內,或是放到 footer 以下歸納 js 的地方。
<!-- owl.carousel -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"></link>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css"></link>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
  1. 直接下載官方檔案包後,將所需檔案放到專案內。
<!-- owl.carousel -->
<link rel="stylesheet" href="js/owl.carousel/owl.carousel.css">
<script src="js/owl.carousel/owl.carousel.js"></script>
<script src="js/owl.carousel/theme.js"></script>

筆者的習慣是,直接下載官方安裝包,並在客戶專案的 js 資料夾內新增一個「owl.carousel」,把所需檔案歸類進去。
總共需要以上三份檔案,請把以上程式碼複製貼上到專案 html 的 footer 以下歸納 js 的地方,或是 head 內皆可。

  1. 需要載入一支 jQuery,可以到 jQuery CDN 載入最新版本:
<!-- jquery -->
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>

安裝完整版

<!-- owl.carousel -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"></link>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css"></link>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

官方 Demo 範例

https://ithelp.ithome.com.tw/upload/images/20201001/20107810EKx5eRYd27.png

官方有提供各式各樣的 Demo 可以參考。
點進各自的 Demo 頁面 後,會有詳細的 htmljs 參數設定說明,非常清楚!

https://ithelp.ithome.com.tw/upload/images/20201001/201078109eBZccJWzQ.jpg

使用範例 - Basic

筆者按照官方提供的 Basic 基本樣式,將程式碼記錄下來:

HTML

<div class="owl-carousel owl-theme">
    <div class="item"><h4>1</h4></div>
    <div class="item"><h4>2</h4></div>
    <div class="item"><h4>3</h4></div>
    <div class="item"><h4>4</h4></div>
    <div class="item"><h4>5</h4></div>
    <div class="item"><h4>6</h4></div>
    <div class="item"><h4>7</h4></div>
    <div class="item"><h4>8</h4></div>
    <div class="item"><h4>9</h4></div>
    <div class="item"><h4>10</h4></div>
    <div class="item"><h4>11</h4></div>
    <div class="item"><h4>12</h4></div>
</div>

CSS(額外新增)

.owl-theme .item {
  height: 10rem;
  background: #4dc7a0;
  padding: 1rem;
}

.owl-carousel .item h4 {
  color: #fff;
  font-weight: 400;
  font-size: 1.4375rem;
  margin-top: 0rem;
}

JavaScript

$(".owl-carousel").owlCarousel({
  loop: true, // 循環播放
  margin: 10, // 外距 10px
  nav: true, // 顯示點點
  responsive: {
    0: {
      items: 1 // 螢幕大小為 0~600 顯示 1 個項目
    },
    600: {
      items: 3 // 螢幕大小為 600~1000 顯示 3 個項目
    },
    1000: {
      items: 5 // 螢幕大小為 1000 以上 顯示 5 個項目
    }
  }
});

這樣就擁有一個基本的輪播效果了!
可以觀看完整版 ➞ Codepen


上一篇
【Day 15】把凌亂的 Code 整理乾淨的線上工具 - DirtyMarkup
下一篇
【Day 17】Trello 讓你的工作更有效率!為什麼設計師也該用 Trello?
系列文
從平面轉型成網頁設計的 UI/UX 設計師30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

0
idea-stu
iT邦新手 5 級 ‧ 2021-07-26 14:04:40

GG iT邦新手 5 級 ‧ 2021-07-27 00:16:23 檢舉

謝謝你/images/emoticon/emoticon37.gif

0
九四帥
iT邦新手 2 級 ‧ 2021-12-27 23:33:56

thank you very much

GG iT邦新手 5 級 ‧ 2021-12-28 15:05:53 檢舉

不會不會~~(ノ>ω<)ノ

我要留言

立即登入留言